<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航 - 舞动健康</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#ff7eb3',
                            DEFAULT: '#d44bdf',
                            dark: '#a742df',
                        }
                    },
                }
            }
        }
    </script>
    <style>
        .navigation-line {
            position: absolute;
            top: 10%;
            left: 20%;
            width: 60%;
            height: 65%;
            border-left: 4px dashed rgba(212, 75, 223, 0.7);
            border-bottom: 4px dashed rgba(212, 75, 223, 0.7);
            border-bottom-left-radius: 30px;
            z-index: 1;
        }
        
        .pulse-circle {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(0.8);
                opacity: 0.8;
            }
            50% {
                transform: scale(1.1);
                opacity: 0.4;
            }
            100% {
                transform: scale(0.8);
                opacity: 0.8;
            }
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
    </style>
</head>
<body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto min-h-screen">
    <!-- 页面内容区 -->
    <main class="relative min-h-screen">
        <!-- 顶部导航栏 -->
        <div class="absolute top-0 left-0 right-0 z-20 glass-effect border-b border-gray-200">
            <div class="flex items-center justify-between px-4 py-4">
                <a href="javascript:history.back()" class="text-gray-700">
                    <i class="fa-solid fa-arrow-left text-xl"></i>
                </a>
                <h1 class="text-lg font-medium text-center flex-1 text-gray-800">前往目的地</h1>
                <div class="w-8"></div>
            </div>
            
            <!-- 路线信息 -->
            <div class="px-4 pb-3">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <h2 class="text-base font-medium text-gray-800">和平里静心瑜伽馆</h2>
                        <p class="text-xs text-gray-500 mt-0.5">距离 2.3 公里，预计 12 分钟到达</p>
                    </div>
                    <div class="flex space-x-3">
                        <a href="#" class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center border border-gray-200">
                            <i class="fa-solid fa-car-side text-gray-600"></i>
                        </a>
                        <a href="#" class="w-8 h-8 bg-primary-DEFAULT rounded-full flex items-center justify-center">
                            <i class="fa-solid fa-person-walking text-white"></i>
                        </a>
                        <a href="#" class="w-8 h-8 bg-gray-100 rounded-full flex items-center justify-center border border-gray-200">
                            <i class="fa-solid fa-bus-simple text-gray-600"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 地图区域 -->
        <div class="w-full h-screen relative">
            <!-- 使用地图背景 -->
            <img src="https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?q=80&w=2000&auto=format&fit=crop" 
                 alt="地图" class="w-full h-full object-cover">
            
            <!-- 导航路径动画 -->
            <div class="navigation-line"></div>
            
            <!-- 起点标记 -->
            <div class="absolute top-[10%] left-[20%] transform -translate-x-1/2 -translate-y-1/2 z-10">
                <div class="w-6 h-6 rounded-full bg-white border-2 border-primary-DEFAULT flex items-center justify-center shadow-md">
                    <div class="w-3 h-3 bg-primary-DEFAULT rounded-full"></div>
                </div>
                <div class="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-white px-2 py-1 rounded text-xs whitespace-nowrap border border-gray-200 shadow-sm">
                    当前位置
                </div>
            </div>
            
            <!-- 终点标记 -->
            <div class="absolute top-[75%] left-[80%] transform -translate-x-1/2 -translate-y-1/2 z-10">
                <div class="w-12 h-12 rounded-full flex items-center justify-center">
                    <div class="w-10 h-10 rounded-full bg-primary-DEFAULT pulse-circle flex items-center justify-center shadow-lg">
                        <i class="fa-solid fa-location-dot text-white text-lg"></i>
                    </div>
                </div>
                <div class="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-white px-3 py-1.5 rounded-lg text-sm whitespace-nowrap border border-gray-200 shadow-lg">
                    和平里静心瑜伽馆
                </div>
            </div>
        </div>
        
        <!-- 底部导航控制面板 -->
        <div class="fixed bottom-0 left-0 right-0 z-30 max-w-md mx-auto">
            <div class="bg-white rounded-t-2xl p-4 shadow-lg border-t border-gray-200">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-base font-medium">路线指引</h3>
                        <p class="text-xs text-gray-500 mt-0.5">步行 · 推荐路线</p>
                    </div>
                    <button class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center border border-gray-200">
                        <i class="fa-solid fa-rotate-right text-primary-DEFAULT"></i>
                    </button>
                </div>
                
                <div class="space-y-4">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200 mr-3">
                            <i class="fa-solid fa-arrow-right text-primary-DEFAULT"></i>
                        </div>
                        <div>
                            <p>向东走，进入和平里南街</p>
                            <p class="text-xs text-gray-500">步行 300 米，约 4 分钟</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200 mr-3">
                            <i class="fa-solid fa-arrow-down text-primary-DEFAULT"></i>
                        </div>
                        <div>
                            <p>左转，进入和平里东街</p>
                            <p class="text-xs text-gray-500">步行 850 米，约 11 分钟</p>
                        </div>
                    </div>
                    
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center border border-gray-200 mr-3">
                            <i class="fa-solid fa-location-dot text-primary-DEFAULT"></i>
                        </div>
                        <div>
                            <p>到达 和平里静心瑜伽馆</p>
                            <p class="text-xs text-gray-500">18号楼2层</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-5">
                    <button class="w-full py-3 rounded-full bg-primary-DEFAULT text-white text-center font-medium">
                        开始导航
                    </button>
                </div>
            </div>
        </div>
    </main>
</body>
</html> 